<template>
  <div class="newrule">
    <div class="step_div">
      <el-steps :active="active" finish-status="success">
        <el-step title="规则信息"></el-step>
        <el-step title="收费项"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>
    <div class="step1" v-show="active === 0">
      <el-form
        :model="ruleForm1"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <span class="step1_title">规则信息</span>
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="ruleForm1.name"></el-input>
        </el-form-item>
        <el-form-item label="规则描述" prop="desc">
          <el-input
            type="textarea"
            v-model="ruleForm1.desc"
            :rows="5"
          ></el-input>
        </el-form-item>
        <span class="step1_title">结算周期</span>
        <el-form-item label="结算周期" prop="region">
          <el-select v-model="ruleForm1.region" placeholder="请选择活动区域">
            <el-option label="周结" value="week"></el-option>
            <el-option label="月结" value="month"></el-option>
            <el-option label="年结" value="year"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="step2" v-show="active === 1">
      <div class="topgroup">
        <span style="color: #b4b4b4">收费项</span>
        <el-button type="primary" size="mini" @click="isshow = true"
          >新增收费项</el-button
        >
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          v-for="item in closProp"
          :key="item.index"
          :prop="item.props"
          :label="item.label"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #header>
            操作&nbsp;&nbsp;<i class="el-icon-s-operation"></i>
          </template>
          <i class="el-icon-edit" @click="edititem"></i>
          <i class="el-icon-delete" @click="deleteitem"></i>
        </el-table-column>
      </el-table>

      <!-- 弹出框 -->
      <div class="m-dialog" v-if="isshow">
        <transition name="fade">
          <div class="inner_content">
            <div class="title">
              新增收费项<i class="el-icon-close" @click="closeDialog"></i>
            </div>
            <el-divider></el-divider>
            <div class="inner_slot">
              <el-row>
                <el-col :span="24">
                    <el-form
                      :model="ruleForm1"
                      :rules="rules"
                      ref="ruleForm"
                      label-width="100px"
                      class="demo-ruleForm"
                      size="mini"
                    >
                        <el-form-item label="收费项名称" prop="name">
                          <el-input
                            v-model="ruleForm1.name"
                            style="width: 150px"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label="收费类型" prop="region">
                          <el-select
                            v-model="ruleForm1.region"
                            placeholder="请选择收费类型"
                            style="width: 150px"
                          >
                            <el-option
                              label="按单收费"
                              value="week"
                            ></el-option>
                            <el-option
                              label="按支付金额"
                              value="month"
                            ></el-option>
                            <el-option
                              label="按订单金额"
                              value="year"
                            ></el-option>
                            <el-option
                              label="按退款金额"
                              value="year"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="最低收费" prop="name">
                          <el-input
                            v-model="ruleForm1.name"
                            style="width: 150px"
                          ></el-input
                          >元
                        </el-form-item>
                        <el-checkbox name="type"></el-checkbox>
                        <el-form-item label="最高收费" prop="name">
                          <el-input
                            v-model="ruleForm1.name"
                            style="width: 150px"
                          ></el-input
                          >元
                        </el-form-item>
                    </el-form>
                </el-col>
              </el-row>

              <!-- <el-table :data="newCharge" border style="width: 100%">
                <el-table-column
                  v-for="item in newChargeClos"
                  :key="item.index"
                  :prop="item.props"
                  :label="item.label"
                >
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                  <template #default="scope">
                    <i
                      class="el-icon-delete"
                      @click="deleteitemDialog(scope.$index, tableData)"
                    ></i>
                  </template>
                </el-table-column>
              </el-table> -->
            </div>
            <div class="btn_group">
              <el-button @click="closeDialog">取消</el-button>
              <el-button type="primary" @click="onSubmit">确认</el-button>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div class="step3" v-show="active === 2">
      <p>规则名称:小规模品牌规则</p>
      <p>规则描述:适用于小于100家门店的连锁品牌</p>
      <p>结算周期:月结</p>
      <p>收费项</p>
      <el-table :data="tableDataStep3" border style="width: 100%">
        <el-table-column
          v-for="item in closStep3"
          :key="item.index"
          :prop="item.props"
          :label="item.label"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="btn_group">
      <el-button type="primary" @click="last" v-if="active !== 0"
        >上一步</el-button
      >
      <el-button type="primary" @click="next" v-if="active !== 2"
        >下一步</el-button
      >
      <el-button type="primary" v-if="active == 2">完成</el-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { onBeforeRouteUpdate } from "vue-router";

export default {
  components: {},
  setup() {
    let state = reactive({
      active: 0,
      isshow: false,
      rules: {
        name: [
          {
            required: true,
            message: "请输入规则名称",
            trigger: "blur",
          },
        ],
        desc: [
          {
            required: true,
            message: "请填写规则描述",
            trigger: "blur",
          },
        ],
        region: [
          {
            required: true,
            message: "请选择结算周期",
            trigger: "change",
          },
        ],
      },
      ruleForm1: {
        name: "",
        desc: "",
        region: "",
      },
      tableData: [],
      closProp: [
        {
          props: "name",
          label: "收费项",
        },
        {
          props: "name",
          label: "收费类型",
        },
        {
          props: "name",
          label: "最低收费",
        },
        {
          props: "name",
          label: "最高收费",
        },
        {
          props: "name",
          label: "描述",
        },
      ],
      newCharge: [
        {
          name: "1",
          count: "1",
          charge: "1",
        },
        {
          name: "1",
          count: "1",
          charge: "1",
        },
      ],
      newChargeClos: [
        {
          props: "name",
          label: "序号",
        },
        {
          props: "count",
          label: "订单数(单)",
        },
        {
          props: "charge",
          label: "金额(元)",
        },
      ],
      tableDataStep3: [],
      closStep3: [
        {
          props: "name",
          label: "收费项",
        },
        {
          props: "name",
          label: "收费类型",
        },
        {
          props: "name",
          label: "最低收费",
        },
        {
          props: "name",
          label: "最高收费",
        },
        {
          props: "name",
          label: "描述",
        },
      ],
    });
    //下一步
    const next = () => {
      if (state.active++ > 2) active = 0;
    };
    //上一步
    const last = () => {
      if (state.active-- == 0) active = 2;
    };
    // 编辑当前项目
    const edititem = () => {};
    //删除当前项
    const deleteitem = () => {};

    const getClose = (prams) => {
      state.isshow = prams;
    };
    // 自定义最后一行
    // const getSummary = (prams) => {
    //     console.log(prams)
    // }

    // 当路由更新
    const routerUpdate = onBeforeRouteUpdate((to) => {
      console.log(to, "--------------");
    });

    return {
      ...toRefs(state),
      next,
      last,
      edititem,
      deleteitem,
      getClose,
      routerUpdate,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-steps {
  width: 60%;
}
.newrule {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-self: flex-start;
  align-content: center;
  .step_div {
    flex: 1;
  }
  .step1 {
    flex: 8;
    width: 50%;
    .step1_title {
      color: #31c0fd;
      display: block;
      position: relative;
      line-height: 30px;
      height: 30px;
      &:before {
        content: "";
        position: absolute;
        display: inline-block;
        left: -10px;
        background-color: #31c0fd;
        width: 4px;
        height: 100%;
      }
    }
  }
  .step2 {
    flex: 8;
    .el-divider {
      margin: 0;
    }
    .m-dialog {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 999;
      background-color: rgba(0, 0, 0, 0.5);
      .inner_content {
        position: absolute;
        right: 0;
        background-color: #fff;
        height: 100%;
        width: 50%;
        z-index: 1000;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        padding-left: 15px;

        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 10%;
          font-weight: 500;
          font-size: 22px;
          padding-left: 20px;
          i {
            padding-right: 20px;
          }
        }
        .inner_slot {
          height: 80%;
          display: flex;
          flex-direction: column;
        }
        .btn_group {
          position: absolute;
          width: 100%;
          height: 10%;
          bottom: 0;
          text-align: center;
        }
      }
    }
    .topgroup {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
    }
  }
  .step3 {
    flex: 8;
    p {
      font-size: 14px;
      color: #b4b4b4;
      height: 25px;
      line-height: 25px;
    }
  }
  .btn_group {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}
.dialog_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
